import { defineComponent, watch, ref } from 'vue';
// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()
    // 定义颜色

    // 配置项
    let options ={}
    // 监听
    watch(
      () => props.cdata,
      (val: any) => {
        options = {
          tooltip: {
            trigger: 'item',
            formatter: '注册用户:<br>{b}:{c} 人'
          },
          legend: {
            data: ["已贯通"],
            textStyle: {
              color: "#B4B4B4"
            },
            top: "0%"
          },
          title: {
            text: "注册用户统计",
            textStyle: {
              color: "#87CEFA",
              fontSize: 14,
            },
            left: "center",
            
          },
          grid: {
            x: "8%",
            width: "82%",
            top: "5%",
            bottom: '15%'
          },
          xAxis: {
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
            axisLine: {
              lineStyle: {
                color: "#B4B4B4"
              }
            },
            axisTick: {
              show: false
            }
          },
          yAxis: [
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },

              axisLabel: {
                formatter: "{value} "
              }
            },
            {
              splitLine: { show: false },
              axisLine: {
                lineStyle: {
                  color: "#B4B4B4"
                }
              },
              axisLabel: {
                formatter: "{value} "
              }
            }
          ],
          series: [
            {
              name: "贯通率",
              type: "line",
              smooth: true,
              showAllSymbol: true,
              symbol: "emptyCircle",
              symbolSize: 8,
              yAxisIndex: 1,
              itemStyle: {
                normal: {
                  color: "#FF8C00"
                }
              },
              data: val.y
            },

          ]
        }

        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )
    return () => {
      const height = "170px"
      const width = "520px"

      return <div>
        <echart ref={chartRef} height={height} width={width} />
      </div>
    }
  }

})

